/* 
# Hello! Hope I am making this clear enough so you can modify it to your needs

# -------- About me --------- #
# author = Emiliano Samario   #
# github username = celepharn #
# mail = celephrn@hotmail.com #
# --------------------------- #

Also, check de documentation!
https://github.com/Alexays/Waybar/wiki
*/

* {
	 min-height: 10px;
	 font-family: "Noto Sans";
	 font-size: 10px;
	 border: none;
	 border-radius: 3px;
}

window#waybar {
	background-color:transparent;
	border-top: 8px transparent;
	border-radius: 8px;
	color: #ffffff;
	margin: 16px 16px;
	transition-property: background-color;
	transition-duration: 5s;
}

window#waybar.hidden {
	opacity: 0.2;
	padding-left: 10px;
	padding-right: 10px;
}
#window {
	background: transparent;
	color: transparent;
	margin-top: 4px;
	padding-left: 10px;
	padding-right: 10px;
	transition: none;
}
#tags {
	background: #161320;
	font-size: 4px;
	margin-top: 4px;
	margin-bottom: 0px;
	margin-left: 12px;
	transition: none;
}
#tags button {
	background: transparent;
	border-radius: 2px;
	color: #b5e8e0;
	font-size: 16px;
	transition: none;
}
#tags button.occupied {
	background: transparent;
	color: #f28fad;
	font-size: 4px;
	transition: none;
}
#tags button.focused {
	border-bottom: 2px solid #abe9b3;
	border-top: 2px solid #abe9b3;
	color: #abe9b3;
}
#tags button:hover {
	border-color: #e8a2af;
	color: #fae3b0;
	transition: none;
}
#tags button.focused:hover {
	color: #e8a2af;
}
#workspaces button {
	background-color: #1e2021;
	color: #b5e8e0;
	font-family: feather;
	font-size: 10px;
	margin: 4px 2px 0 2px;
	min-width: 32px;
	padding: 2px 0 0 0;
}
#workspaces button.active{
	background: linear-gradient(220deg, rgba(248,189,150,1) 0%, rgba(181,232,224,1) 49%, rgba(0,212,255,1) 100%);
	color: #1e2021;
	font-family: feather;
	font-size: 10px;
	margin: 4px 2px 0 2px;
	min-width: 32px;
	padding: 2px 0 0 0;
}
#workspaces button:hover {
	color: #b4befe;
	font-family: feather;
	font-size: 10px;

}
#workspaces button.focused {
        background-color: #bbccdd;
        color: #1e2021;
	font-family: feather;
	font-size: 10px;
}
#workspaces button.urgent {
        background-color: #fae3b0;
	font-family: feather;
	font-size: 10px;
}

#window,
#workspaces {
	font-family: feather;
	font-size: 10px;
        margin: 0 4px;
}

.modules-left > widget:first-child > #workspaces {
        margin-left: 0;
}

.modules-right > widget:first-child > #workspaces {
        margin-right: 0;
}

#network {
	background: #1e2021;
	border-radius: 3px;
	color: #bd93f9;
	margin-bottom: 0px;
	margin-left: 4px;
	margin-top: 4px;
	padding-left: 10px;
	padding-right: 10px;
	transition: none;
}

#pulseaudio {
	background: #1e2021;
	border-radius: 3px;
	color: #fae3b0;
	margin-bottom: 0px;
	margin-left: 4px;
	margin-top: 4px;
	padding-left: 10px;
	padding-right: 10px;
	transition: none;
}

#battery {
	background: #1e2021;
	border-radius: 3px;
	color: #b5e8e0;
	margin-bottom: 0px;
	margin-left: 4px;
	margin-top: 4px;
	padding-left: 7px;
	padding-right: 5px;
	transition: none;
}

#battery.charging, #battery.plugged {
  	background-color: #1e2021;
	color: #b5e8e0;
}

#battery.critical:not(.charging) {
    	background-color: #1e2021;
    	color: #b5e8e0;
}

#backlight {
	background: #1e2021;
	border-radius: 3px;
	color: #f8bd96;
	margin-bottom: 0px;
	margin-left: 4px;
	margin-top: 4px;
	padding-left: 10px;
	padding-right: 10px;
	transition: none;
}

#clock {
	background: #1e2021;
	border-radius: 3px;
	color: #abe9b3;
	margin-bottom: 0px;
	margin-left: 4px;
	margin-top: 4px;
	padding-left: 7px;
	padding-right: 5px;
	transition: none;
}

#memory {
	background: #1e2021;
	border-radius: 3px;
	color: #ddb6f2;
	margin-bottom: 0px;
	margin-left: 4px;
	margin-top: 4px;
	padding-left: 10px;
	padding-right: 10px;
	transition: none;
}

#temperature {
	background: #1e2021;
	border-radius: 3px;
	color: #f8bd96;
	margin-bottom: 0px;
	margin-left: 4px;
	margin-top: 4px;
	padding-left: 10px;
	padding-right: 10px;
	transition: none;
}

#cpu {
	background: #1e2021;
	border-radius: 3px;
	color: #96cdfb;
	margin-bottom: 0px;
	margin-left: 4px;
	margin-top: 4px;
	padding-left: 10px;
	padding-right: 10px;
	transition: none;
}

#custom-launcher {
    	background: #1e2021;
	border-radius: 3px;
    	color: #fae3b0;
	font-size: 15px;
	margin-left: 4px;
	margin-top: 4px;
	padding-left: 11px;
	padding-right: 3px;
	transition: none;
}

#custom-power {
	background: #1e2021;
	border-radius: 3px;
	color: #f28fad;
	font-size: 10px;
	margin-bottom: 0px;
	margin-left: 4px;
	margin-right: 4px;
	margin-top: 4px;
	padding-left: 10px;
    	padding-right: 10px;
	padding-top: 2px;
	transition: none;
}
